// 点击反馈
.click {
  cursor: pointer;

  &:active {
    filter: brightness(0.9);
  }

  &--bcl {
    &:active {
      filter: brightness(1);
      background-color: var(--color-active);
    }
  }
}

// 圆角
.radius {
  border-radius: var(--border-radius);
  overflow: hidden;

  &--lg {
    border-radius: 10px;
  }
}

.round {
  border-radius: 50%;
  overflow: hidden;
}

// 文字
@for $i from 1 to 10 {
  .fw-#{$i * 100} {
    font-weight: $i * 100;
  }
}

.fw-thin {
  font-weight: 200;
}

.fw-bold {
  font-weight: bolder;
}

.td-under {
  text-decoration: underline;
}

.td-del {
  text-decoration: line-through;
}

.lh-1 {
  line-height: 1;
}

.lh-2 {
  line-height: 2;
}

@for $i from 10 to 101 {
  .fz-#{$i} {
    font-size: $i * 1px !important;
  }
}

@for $i from 1 to 6 {
  .hide-#{$i} {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $i;
    overflow: hidden;
  }
}

// 对齐
.ta-left {
  text-align: left;
}

.ta-center {
  text-align: center;
}

.ta-right {
  text-align: right;
}

.ta-between {
  text-align: justify;
  text-align-last: justify;
}

.va-top {
  vertical-align: top;
}

.va-center {
  vertical-align: middle;
}

.va-bottom {
  vertical-align: bottom;
}

// 边距
@for $i from 0 to 41 {
  @each $word, $key in 't' 'top', 'r' 'right', 'b' 'bottom', 'l' 'left',
    'all' 'all'
  {
    @if ($key != 'all') {
      .m#{$word}-#{$i * 5} {
        margin-#{$key}: $i * 5 * 1px !important;
      }

      .p#{$word}-#{$i * 5} {
        padding-#{$key}: $i * 5 * 1px !important;
      }
    } @else {
      .m-#{$i * 5} {
        margin: $i * 5 * 1px;
      }

      .p-#{$i * 5} {
        padding: $i * 5 * 1px;
      }
    }
  }
}

// 边框
@each $key in 'top', 'right', 'bottom', 'left', 'all' {
  @if ($key != 'all') {
    .bd-#{$key} {
      border-#{$key}: 1px solid var(--color-border);

      &.bold {
        border-width: 10px;
        border-color: var(--color-bg);
      }
    }
  } @else {
    .bd {
      border: 1px solid var(--color-border);

      &.bold {
        border-width: 5px;
        border-color: var(--color-bg);
      }
    }
  }
}

// 阴影
.sd {
  box-shadow: 0 0 10px 1px #f1f1f1;
}

.sd-top {
  box-shadow: 0 -10px 10px -10px #f1f1f1;
}

.sd-right {
  box-shadow: 10px 0 10px -10px #f1f1f1;
}

.sd-bottom {
  box-shadow: 0 10px 10px -10px #f1f1f1;
}

.sd-left {
  box-shadow: -10px 0 10px -10px #f1f1f1;
}

// 触屏
.unselect {
  user-select: none;
}

.uncallout {
  -webkit-touch-callout: none;
}
